<!-- page content -->
<div class="right_col" role="main" xmlns:v-bind="http://www.w3.org/1999/xhtml"
	 xmlns:v-model="http://www.w3.org/1999/xhtml">
	<div class="">
		<div class="page-title">
			<div class="title_left">
				<h3>
					Vue Index Page
				</h3>
			</div>
		</div>

		<div class="clearfix"></div>

		<h3>This is vue index page.</h3>
		<p>===========================================</p>
		<div id="vueTest">
			<form action="javascript:void(0);">
				<h3>{{title}}</h3>
				<h3>单向绑定</h3>
				<p>UserName: <input type="text" v-bind:value="user.userName"/></p>
				<p>Password: <input type="text" :value="user.password" /></p>
				<p>===========================================</p>
				<h3>双向绑定</h3>
				<input type="hidden" v-model:value="user.id"/>
				<p>UserName: <input type="text" v-model:value="user.userName"/></p>
				<p>Password: <input type="text" v-model:value="user.password" /></p>
				<p>Email: <input type="text" v-model:value="user.email" /></p>
				<p>UserImage: <input type="text" v-model:value="user.userImage" /></p>
				<p>===========================================</p>
				<h3>事件绑定</h3>
				<input type="button" @click="test1()" value="test_1">
				<p>===========================================</p>
				<h3>循环</h3>
				<span v-for="(role, index) in roles">
					<input type="checkbox" :value="role.id" /> {{role.name}}
				</span>
				<table>
					<tr><td>ID</td><td>Name</td></tr>
					<tr v-for="(role, index) in roles">
						<td>{{role.id}}</td><td>{{role.name}}</td>
					</tr>
				</table>
				<p>===========================================</p>
				<h3>自定义组件</h3>
				<p>简单组件：<button-demo></button-demo></p>
				<p>复杂组件：<button-count></button-count></p>
			</form>
		</div>
	</div>
</div>
<!-- /page content -->

<script type="text/javascript">
	/* $(function() {
		initUser();
	}); */
	
	Vue.component("button-demo", {
		template: "<button>11111</button>",
	});
	
	Vue.component("button-count", {
		data: function() {
			return {count: 0}
		},
		methods: {
			countFunction: function () {
				this.count ++;
			}
		},
		template: "<button @click='countFunction()'>{{count}}</button>",
	});
	
	var vueTest = new Vue({
		el: "#vueTest",
		data: {
			title: "Vue test",
			user: {
				id: "11",
				userName:"HymanHu",
				password:"111111",
				email:"hj@163.com",
				userImage:"/upload/18.png",
			},
			roles: [
				{id: 1, name: "admin"},
				{id: 2, name: "manager"},
				{id: 3, name: "staff"},
			],
		},
		methods:{
			test1: function() {
				console.log(this.user);
				
			},
			initUser: function() {
				var userId = $("#userId").val();
				var self = this;
				$.ajax({
					url : "/api/user/" + userId,
					type : "get",
					success : function (rs) {
						self.user = rs;
					},
					error : function (data) {
						layer.msg(data.responseText, {icon: 0});
					}
				});
			}
		},
		created: function() {
			window.initUser = this.initUser;
		},
		mounted: function() {
			this.initUser();
		}
	});
	
</script>